<template>
	<view class="settings-page pageBg">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view @click="fanhui('/pages/user/user')" class="back-btn">
				<uni-icons type="left" size="30" color="#333"></uni-icons>
			</view>
			<view class="header-title">设置</view>
		</view>

		<!-- 设置内容区域 -->
		<view class="settings-content">
			<!-- 用户信息区域 -->
			<view class="user-section" v-if="userStore.isAuthenticated">
				<view class="user-info">
					<view class="avatar">
						<image src="https://www.pengfei.site:8443/image/Chi.gif" mode="aspectFill" class="avatar-img"></image>
					</view>
					<view class="user-details">
						<view class="username">{{ userStore.username }}</view>
						<view class="user-status">已登录</view>
					</view>
				</view>
			</view>

			<!-- 设置选项列表 -->
			<view class="settings-list">
				<!-- 清理缓存 -->
				<view class="setting-item" @click="clearCache">
					<view class="item-left">
						<view class="item-icon" style="background-color: #ff6b6b;">
							<text class="icon">🗑️</text>
						</view>
						<view class="item-info">
							<view class="item-title">清理缓存</view>
							<view class="item-desc">清理小程序本地缓存数据</view>
						</view>
					</view>
					<view class="item-right">
						<uni-icons type="right" size="16" color="#ccc"></uni-icons>
					</view>
				</view>

				<!-- 退出登录 -->
				<view class="setting-item logout-item" @click="showLogoutConfirm" v-if="userStore.isAuthenticated">
					<view class="item-left">
						<view class="item-icon" style="background-color: #ff4757;">
							<text class="icon">🚪</text>
						</view>
						<view class="item-info">
							<view class="item-title">退出登录</view>
							<view class="item-desc">退出当前账号</view>
						</view>
					</view>
					<view class="item-right">
						<uni-icons type="right" size="16" color="#ccc"></uni-icons>
					</view>
				</view>

				<!-- 关于应用 -->
				<view class="setting-item">
					<view class="item-left">
						<view class="item-icon" style="background-color: #5352ed;">
							<text class="icon">ℹ️</text>
						</view>
						<view class="item-info">
							<view class="item-title">关于应用</view>
							<view class="item-desc">版本信息和帮助</view>
						</view>
					</view>
					<view class="item-right">
						<uni-icons type="right" size="16" color="#ccc"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useUserStore } from '@/stores/user'
	import { ref } from 'vue'

	// 用户store
	const userStore = useUserStore()

	// 返回上一页
	const fanhui = (e) => {
		uni.switchTab({
			url: e
		})
	}

	// 清理缓存
	const clearCache = () => {
		uni.showModal({
			title: '清理缓存',
			content: '确定要清理小程序缓存吗？这将清除所有本地存储的数据。',
			confirmText: '确定',
			cancelText: '取消',
			success: (res) => {
				if (res.confirm) {
					// 清理所有缓存
					try {
						uni.clearStorageSync()
						uni.showToast({
							title: '缓存清理成功',
							icon: 'success',
							duration: 2000
						})
						
						// 如果用户已登录，需要重新保存用户数据
						if (userStore.isAuthenticated) {
							userStore.saveToStorage()
						}
					} catch (error) {
						console.error('清理缓存失败:', error)
						uni.showToast({
							title: '清理缓存失败',
							icon: 'error',
							duration: 2000
						})
					}
				}
			}
		})
	}

	// 显示退出登录确认对话框
	const showLogoutConfirm = () => {
		uni.showModal({
			title: '退出登录',
			content: '确定要退出当前账号吗？',
			confirmText: '退出',
			cancelText: '取消',
			confirmColor: '#ff4757',
			success: (res) => {
				if (res.confirm) {
					logout()
				}
			}
		})
	}

	// 退出登录
	const logout = () => {
		try {
			// 调用store的logout方法
			userStore.logout()
			
			uni.showToast({
				title: '已退出登录',
				icon: 'success',
				duration: 1500
			})

			// 延迟跳转到登录页面
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}, 1500)
		} catch (error) {
			console.error('退出登录失败:', error)
			uni.showToast({
				title: '退出失败',
				icon: 'error',
				duration: 2000
			})
		}
	}
</script>

<style lang="scss" scoped>
.settings-page {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.header {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
	position: sticky;
	top: 0;
	z-index: 100;
	margin-top: 80rpx;
}

.back-btn {
	padding: 10rpx;
	margin-right: 20rpx;
}

.header-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

.settings-content {
	padding: 30rpx;
}

.user-section {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.user-info {
	display: flex;
	align-items: center;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	overflow: hidden;
	margin-right: 30rpx;
	background-color: #f0f0f0;
}

.avatar-img {
	width: 100%;
	height: 100%;
}

.user-details {
	flex: 1;
}

.username {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 10rpx;
}

.user-status {
	font-size: 26rpx;
	color: #52c41a;
}

.settings-list {
	background-color: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.setting-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	transition: background-color 0.2s ease;
}

.setting-item:last-child {
	border-bottom: none;
}

.setting-item:active {
	background-color: #f8f8f8;
}

.logout-item {
	border-top: 1rpx solid #f0f0f0;
}

.item-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.item-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 30rpx;
}

.item-icon .icon {
	font-size: 40rpx;
}

.item-info {
	flex: 1;
}

.item-title {
	font-size: 30rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 8rpx;
}

.item-desc {
	font-size: 24rpx;
	color: #999;
}

.item-right {
	margin-left: 20rpx;
}
</style>